<template>
  <div class="video-wrap">
    <video
      ref="video"
      class="video-js vjs-default-skin video"
    ></video>
  </div>
</template>
<script>
import videojs from 'video.js';
import 'videojs-contrib-hls';
export default {
  data() {
    return {
      option: null,
      player: null
    };
  },
  methods: {
    startHls() {
      this.option = {
        autoplay: true,
        muted: true,
        loop: true,
        controls: false,
        notSupportedMessage: '此视频暂时无法播放，请稍后再试',
        sources: [
          {
            type: 'application/x-mpegURL',
            src: this.url
          }
        ]
      };
      this.player = videojs(this.$refs.video, this.option, function() {
        this.on('error', function() {
          this.errorDisplay.contentEl().innerText =
            '此视频暂时无法播放，请稍后再试';
          // player.errorDisplay.close(); // 将错误信息不显示
        });
      });
    }
  },
  mounted() {
    this.startHls();
  },
  props: {
    url: String
  },
  beforeDestroy() {
    this.player?.dispose();
  }
};
</script>
<style lang="scss" scoped>
.video-wrap {
  width: 37.5rem;
  height: 21.1875rem;
  margin: 1.25rem auto 0;
  .video {
    width: 100%;
    height: 100%;
  }
  .vjs-tech {
    object-fit: fill;
  }
}
</style>
